Repository navigation
Slide box: a scrim the circle's centred text can be read on - #42
Merged
Merged
Conversation
shape="circle" dropped the image variant's foot scrim (the text is in the middle of the disc, not at its foot) and put a flat 0.35 tint over the whole front instead. On the demo's coast card the white title and line sat on the sand at 2.4:1, measured from the rendered pixels; the text needs 4.5:1 and the 19.2px bold title 3:1. The circle's ::after now carries the scrim: a radial tint, 0.62 to 55% of the radius and 0.38 at the rim, so the middle is dark enough for the text and the rim still shows the photo. --slb-scrim overrides it there as it does the foot gradient on a rectangle; the header comment and the catalog note say a circle wants a radial or flat value. Measured on the demo after: title and text 5.23:1 at the worst pixel. The ridge card is untouched (8.06:1 / 8.75:1). Co-Authored-By: Claude Fable 5.1 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Defect
shape="circle"on the image variant dropped the foot scrim (.slb__body { background: none }) and put a flatrgb(20 24 40 / 0.35)over the whole front instead. On the demo's "The roastery" card (gallery-coast.svg) the white title and line sit on the sand path, and the rendered composite under them is 2.4:1. The 17px text needs 4.5:1; the 19.2px/800 title is large text and needs 3:1. Both failed.Fix
The circle's
::afternow carries the scrim:radial-gradient(closest-side, rgb(20 24 40 / 0.62) 55%, rgb(20 24 40 / 0.38)), darkest under the centred text, lighter at the rim so the photo still reads.--slb-scrimoverrides it on the circle as it does the foot gradient on a rectangle; the element header and the catalog's--slb-scrimnote now say so and that a circle wants a radial or flat value, not a foot gradient. The circle clip and the slide are untouched (the scrim is on the pseudo-element the old tint used; the body keepsz-index: 1above it). The rectangle fallback (0.45 / 0.3 at 60%) is unchanged.Measured
superherotech.ai built in a worktree at origin/main,
ELEMENTS_SOURCEpointed at this branch for the whole chain. Headless Chrome (CDP, 1280px wide, 1x) loads/elements/slide-box/, waits fordata-readyand the images, hides the title and text (visibility only, so nothing moves), screenshots, and samples every pixel of each text box's bounding rect from the screenshot: the true composite of photo + scrim + tint, not a reconstruction. Contrast is WCAG relative luminance against the text's#fff, reported at the worst pixel.Worst pixel before: rgb(168,167,166), the sand under the 0.35 tint. After: rgb(107,108,114). The ridge card matches the numbers from #40 (8.1 / 8.75), which is the check that the method agrees with the earlier one.
Checks
npm run check: greennpm run build && npm run checkwithELEMENTS_SOURCE=<this branch>for the whole chain (prebuild re-fetches main's tarball otherwise): green, 104 pages, vendored at 58bdcebDo not merge without a look: a merge fires the site's Pages deploy hook.
🤖 Generated with Claude Code